<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <h2 class="text-title-md2 font-bold text-black dark:text-white">Sources</h2>
  <nav class="flex items-center justify-between gap-6">
    <.link href={opml_feed_url(@conn)} x-data="{ copied: false }" x-on:click={~s"
          $event.preventDefault();
          copyWithCallbacks(
            '#{opml_feed_url(@conn)}',
            () => copied = true,
            () => copied = false
          )
        "}>
      Copy OPML <span class="hidden sm:inline">Feed</span>
      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
    </.link>
    <.link href={~p"/sources/new"}>
      <.button color="bg-primary" rounding="rounded-lg">
        <span class="font-bold mx-2">+</span> New <span class="hidden sm:inline pl-1">Source</span>
      </.button>
    </.link>
  </nav>
</div>

<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
  <div class="max-w-full overflow-x-auto">
    {live_render(@conn, PinchflatWeb.Sources.SourceLive.IndexTableLive,
      session: %{
        "initial_sort_key" => :custom_name,
        "initial_sort_direction" => :asc,
        "results_per_page" => 10
      }
    )}
  </div>
</div>
